<template>
  <div>
    <div class="flex items-center">
      <FormTitle style="width: auto; margin-bottom: 0" title="附加费用信息" />
      <el-checkbox
        class="ml-[8px]"
        v-model="innerSurchargeZero"
        :true-label="1"
        :false-label="0"
      >
        里面附加费费用零进行计算
      </el-checkbox>
    </div>
    <VForm
      ref="formRef"
      :model="model"
      :fieldList="fieldList"
      :options="formOption"
    >
    </VForm>
    <FeeItem
      ref="feeRef"
      v-for="item in attrList"
      :options="options"
      :label="item.label"
      :costUnit="item.cost_unit"
      :costIdent="item.value"
      :key="item.value"
      :data="data.surcharge"
    />
  </div>
</template>
<script setup>
import FormTitle from '@/components/Form/FormTitle.vue'
import VForm from '@/components/Form/index.vue'
import FeeItem from './FeeItem/index.vue'
import { getSurcharge } from '../../../api'

const formRef = ref()
const feeRef = ref()
const model = ref({})
const innerSurchargeZero = ref()

const props = defineProps({
  deliverMode: { type: [Number, String], default: '' },
  options: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
})

const fieldList = ref([])

const attrList = ref([])

watch(
  () => props.data,
  val => {
    const { surcharge = [], channel } = val || {}
    fieldList.value = surcharge.map(n => ({
      ...n,
      field: n.cost_ident,
      label: n.cost_label,
      append: n.cost_unit,
    }))
    let obj = {}
    surcharge.forEach(n => {
      obj[n.cost_ident] = n.cost_value
    })
    model.value = obj
    innerSurchargeZero.value = channel?.inner_surcharge_zero
  },{
    deep:true
  }
)

watch(
  () => props.deliverMode,
  async val => {
    if (!val) return
    try {
      const { data } = await getSurcharge({ delivery_mode: val })
      fieldList.value = []

      const hasAttr = data.filter(n => n.has_inc_attrs)
      const notAttr = data.filter(n => !n.has_inc_attrs)

      const _data = notAttr.map(n => ({
        ...n,
        field: n.value,
        append: n.cost_unit,
        type: 'number',
      }))

      fieldList.value = _data
      attrList.value = hasAttr
    } catch (e) {
      console.error(e)
    }
  },
  { immediate: true }
)

const formOption = {
  inline: true,
  labelPosition: 'top',
}

const submit = () => {
  return new Promise(async (resolve, reject) => {
    try {
      const formInfo = await formRef.value.submit()

      let channel_surcharge = []

      for (let n in formInfo) {
        channel_surcharge.push({
          cost_ident: n,
          cost_value: Number(formInfo[n]),
        })
      }
      if (
        feeRef.value &&
        Object.prototype.toString.call(feeRef.value) === '[object Array]'
      ) {
        for (let i = 0; i < feeRef.value.length; i++) {
          try {
            const res = await feeRef.value[i].submit()
            if (res?.length) {
              res?.forEach(item=>{
                item.is_delete = 0
              })
              channel_surcharge = [...channel_surcharge, ...res]
            }
          } catch (e) {
            console.warn(e)
            reject(e)
          }
        }
      }
      resolve({
        channel_surcharge: channel_surcharge,
        inner_surcharge_zero: innerSurchargeZero.value,
      })
    } catch (e) {
      console.error(e)
      reject(e)
    }
  })
}

const reset = () => {
  attrList.value = []
  fieldList.value = []
}

defineExpose({ submit, reset })
</script>
